<template>
  <div>
    <div :style="['containerStyle', transform]">
      <div>
        <SierpinskiTriangle :x="0" :y="0" :s="1000">
          {{ seconds }}
        </SierpinskiTriangle>
      </div>
    </div>
  </div>
</template>

<script>
import SierpinskiTriangle from './SierpinskiTriangle.vue'

const containerStyle = {
  position: 'absolute',
  transformOrigin: '0 0',
  left: '50%',
  top: '50%',
  width: '10px',
  height: '10px',
  background: '#eee',
}

export default {
  components: {
    SierpinskiTriangle: SierpinskiTriangle
  },
  props: {
    elapsed: 0,
    type: Number
  },
  watch: {
    'elapsed': function () {
      const elapsed = this.elapsed;
      const t = (elapsed / 1000) % 10;
      const scale = 1 + (t > 5 ? 10 - t : t) / 10;
      this.transform = 'scaleX(' + (scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)';
    }
  },
  computed: {},
  data() {
    return {
      seconds: 0,
      transform: '',
      intervalID: null
    }
  },
  methods: {
    tick() {
      this.seconds = (this.seconds % 10) + 1
    }
  },
  mounted() {
    console.log('mounted')
    this.intervalID = setInterval(this.tick, 1000)
  },
  beforeDestroy() {
    clearInterval(this.intervalID)
  }
}
</script>

<style scoped>
body {
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  padding: 30px;
}

a {
  color: #4183c4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
  font-size: 12px;
  margin: 0 2px;
  padding: 0px 5px;
}

h1, h2, h3, h4 {
  font-weight: bold;
  margin: 0 0 15px;
  padding: 0;
}

h1 {
  border-bottom: 1px solid #ddd;
  font-size: 2.5em;
  font-weight: bold;
  margin: 0 0 15px;
  padding: 0;
}

h2 {
  border-bottom: 1px solid #eee;
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.2em;
}

p, ul {
  margin: 15px 0;
}

ul {
  padding-left: 30px;
}

</style>
